<template>
	<view style="background-color: #f4f5f7;">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="clearfix person_info">
				<view class="message_cont" @click="openNews">
					<text class="badge" v-if="userinfo.bookNoRead"></text>
					<!-- <image src="../../static/icon/scan.png" mode="" class="scan_img"></image> -->
					<image src="../../static/message.png" mode="" class="message_img"></image>
				</view>
				<view class="fl head_img_cont"><image :src="userinfo.headpic" mode="" class="head_img" @click="open"></image></view>
				<view class="fl head_info">
					<view class="head_info_text">
						<text>{{ userinfo.uUser }}</text>
						<text class="head_info_text_class">{{ userinfo.vipName || '暂无会员级别' }}</text>
					</view>
					<view class="head_info_detail">{{ userinfo.user_name }}</view>
				</view>
			</view>
			<view class="wallet_info">
				<view class="clearfix wallet_detail">
					<view class="fl wallet_detail_item">
						<view>USDT</view>
						<view class="num">{{ userinfo.uMoney }}</view>
					</view>
					<view class="fl wallet_detail_item">
						<view>DT通证</view>
						<view class="num">{{ userinfo.uBenjin }}</view>
					</view>
					<view class="fl wallet_detail_item">
						<view>DTSM通证</view>
						<view class="num">{{ userinfo.uLixiSum }}</view>
					</view>
					
					<view class="fl wallet_detail_item">
						<view>储值账户</view>
						<view class="num">{{ userinfo.uLixi }}</view>
					</view>
				<!-- 	<view class="fl wallet_detail_item">
						<view>授权金额</view>
						<view class="num">{{ userinfo.uGrantMoney || 0 }}({{userinfo.canGrantMoney || 0}})</view>
					</view>
					 -->
				</view>
				<view class="control">
					<view class="row" @click="openRecharge">
						<image src="../../static/icon/icon_deposit_home.png" mode="" class="control_icon" ></image>
						<text class="control_text">充值USDT</text>
					</view>
					
				<view class="row" @click="openWithdrawal">
					<image src="../../static/icon/icon_withdrawal_home.png" mode="" class="control_icon" ></image>
					<text class="control_text" >提取USDT</text>
						</view> 
					
						<view class="row" @click="openTransfer">
					<image src="../../static/icon/icon_transfer_home.png" mode="" class="control_icon" ></image>
					<text class="control_text" >提取DTSM</text>
						</view>
						
						<view class="row"  @click="openChange"> 
						<image src="../../static/icon/been_icon.png" mode="" class="control_icon"></image>
						<text class="control_text" >划转USDT</text>
							</view>
					
					
				</view>
			</view>
			<view class="ad_pic_cont">
			<!-- 	<image src="../../static/user-bg1.jpg" mode="" class="ad_pic"></image>
				<image src="../../static/user-bg1.jpg" mode="" class="ad_pic"></image> -->
				<!-- 交易匹配早上08：00至11：30，晚上04：00至06：00 -->
			</view>
	
			<view class="function_cont">
				<view class="function_title"><text>我的功能</text></view>
				<view class="function_cont">
					<view class="clearfix function_list">
						<view class="fl function_item"  @click="openUpdateUser">
							<image src="../../static/icon/icon_my_personal.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">个人资料</view>
						</view>
						
						
						<view class="fl function_item"  @click="openAccounts">
							<image src="../../static/icon/category5.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">收款地址</view>
						</view>


	<view class="fl function_item" @click="openMoneyChangeList">
							<image src="../../static/icon/icon_my_invite.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">充提记录</view>
						</view>

						<view class="fl function_item"  @click="openNewsNotice">
							<image src="../../static/icon/icon_my_transaction.png" mode="" class="function_item_img"></image>
							<view class="function_item_text" >系统通知</view>
						</view>

						<view class="fl function_item"  @click="openNewsOpinion">
							<image src="../../static/icon/icon_my_opinion.png" mode="" class="function_item_img"></image>
							<view class="function_item_text" >意见反馈</view>
						</view>

						<view class="fl function_item" v-if="false">
							<image src="../../static/icon/icon_my_setting.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">设置</view>
						</view>
						
						
						<view class="fl function_item" @click="openActiveUser">
							<image src="../../static/icon/icon_my_setting.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">激活会员</view>
						</view>
						
						
						<view class="fl function_item" v-if="userinfo.buyshow"  @click="openDiShu">
							<image src="../../static/icon/category1.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">打地鼠</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="btn_cont"><button type="normal" class="exit_btn" @click="logout">退出登录</button></view>
		</scroll-view>
		<uni-popup ref="popup" type="center">
			<view class="popup_cont">
				<view class="popup_cont_list clearfix"  >
					<view class="fl head_img_item_cont" v-for="(item,index) in  headpiclist " :key="index"> 
						<image :src="item.pic" mode="" class="head_img_item" :data-srcdata="item.pic" @click="showImg($event, index)"></image>
						<image src="../../static/icon/right.png" mode="" class="active_head_img" :class="{ active: picindex == index }"></image>
					</view>
				
				<!-- 	<view class="fl head_img_item_cont"><image src="../../static/icon/cammer.png" mode="" class="head_img_item" @click="openPic"></image></view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

import { CUser } from '@/common/cache/user.js';
import bussiness from '../../static/dataJson/bussiness.json';
var cache_user = new CUser();

export default {
	data() {
		return {
			tabList: [],
			old: {
				scrollTop: 0
			},
			scrollTop: 0,
			picindex: 0,
			userinfo: {},
			
			headpiclist : bussiness.headpiclist
		
			
			
		};
	},
	components: {
		
	},

	onLoad() {
		
	},
	onShow() {
		 cache_user.userinfo().then(res=>{ 
			 console.log('usershow',res)
			 this.userinfo = res;
	 });
	},

	mounted() {
		//this.tabList = mine.tabList;
	},
	

	
	methods: {
		upper: function(e) {
			//console.log(e);
		},
		lower: function(e) {
			//console.log(e);
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		
		
		set() {
			this.$api.http.post('/assistance/index/setUserHeadPic', {headpic : this.userinfo.headpic}).then(res => {
				
				this.$api.msg(res.msg)
		
			})
		
		},
		
		
		openNews(e) {
			uni.navigateTo({
				url: 'news',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		openTransfer(){
			uni.navigateTo({
				url: 'transferaccounts',
				success: res => {},
				})
		},
		openChange(){
			uni.navigateTo({
				url: 'changeaccounts',
				success: res => {},
				})
		},
		
		
		openWithdrawal(){
			uni.navigateTo({
				url: 'withdrawal',
				success: res => {},
				})
		},
		
		
		
		openRecharge(){
			uni.navigateTo({
				url: 'recharge',
				success: res => {},
				})
		},
		
		openNewsOpinion(){
			uni.navigateTo({
				url: 'news?tabCur='+3,
				success: res => {},
				})
		},
		
	openNewsNotice(){
		uni.navigateTo({
			url: 'news?tabCur='+0,
			success: res => {},
			})
	},
	
	
	openMoneyChangeList(){
		uni.navigateTo({
			url: 'changemoneylist',
			success: res => {},
			})
	},
	
	openUpdateUser(){
		
		uni.navigateTo({
			url: 'updateuser',
			success: res => {},
			})
		
	},
	
	openAccounts(){
		
		uni.navigateTo({
			url: 'accounts',
			success: res => {},
			})
		
	},
	
	openDiShu(){

		
		uni.navigateTo({
			url: 'dishu',
			success: res => {},
			})
	},
	
	openActiveUser(){
	
		
		uni.navigateTo({
			url: 'activeUser',
			success: res => {},
			})
	},
	
	
		
		openPic() {
			var that = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有 'original',
				sourceType: ['album'], //从相册选择
				success: function(res) {
					var str = JSON.stringify(res.tempFilePaths);
					console.log(str.slice(7, str.length - 2));
					// this.$refs.popup.close()
					console.log(that.userinfo.headpic);
					that.userinfo.headpic = str.slice(7, str.length - 2);
					console.log('22', that.userinfo.headpic);
					that.picindex = 0
					// 预览图片
					//      uni.previewImage({
					//          urls: res.tempFilePaths,
					// })
				}
			});
		},
		logout() {
		var that = this;
			uni.showModal({
				title: '提示',
				content: '是否退出？',
				success: function(res) {
					if (res.confirm) {
						that.$api.http.post('auth/loginout').then(res => {
							
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: '../login/login',
								success: res => {
									
								}
							});
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		showImg(e, val) {
			console.log(e.target.dataset.srcdata);
			this.userinfo.headpic = e.target.dataset.srcdata;
			this.picindex = val;
			
			this.set();
			this.close()
		}
	}
};
</script>

<style lang="scss">
.clearfix {
	zoom: 1;
	display: block;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.active {
	display: inline !important;
}

.colorWhite {
	color: #ffffff;
}

scroll-view {
	height: 100vh;
}

.person_info {
	background-color: #6399e3;
	padding: 164upx 20upx 110upx;
	position: relative;

	.message_cont {
		position: absolute;
		top: 94upx;
		right: 30upx;

		.message_img {
			width: 50upx;
			height: 50upx;
		}

		.scan_img {
			width: 50upx;
			height: 50upx;
			margin-right: 10upx;
		}

		.badge {
			border-radius: 50%;
			height: 18upx;
			width: 18upx;
			background: #ff0000;
			position: absolute;
			top: -6upx;
			right: -6upx;
			z-index: 99;
		}
	}

	.head_img_cont {
		.head_img {
			border: 6upx solid #ffffff;
			border-radius: 50%;
			width: 100upx;
			height: 100upx;
		}
	}

	.head_info {
		margin: 10upx 0 0 18upx;

		.head_info_text {
			color: #ffffff;
			font-size: 30upx;

			.head_info_text_class {
				background-color: #ffd83b;
				font-size: 22upx;
				padding: 4upx 14upx 4upx 4upx;
				font-style: italic;
				margin-left: 10upx;
			}
		}

		.head_info_detail {
			color: #9ecaff;
			font-size: 26upx;
			margin-top: 10upx;
		}
	}
}

/* #ifdef MP */
.person_info {
	padding: 266upx 20upx 110upx;
	.message_cont{
		top:162upx;
	}
}
/* #endif */
.wallet_info {
	margin: -64upx 20upx 0;
	padding: 16upx 36upx;
	background-color: #ffffff;
	border-radius: 20upx;
	position: relative;

	.wallet_detail {
		font-size: 28upx;
		line-height: 50upx;
		border-bottom: 2upx dashed #e8e8e8;
		padding-bottom: 30upx;
		color: rgb(51, 51, 51);

		.wallet_detail_item {
			width: 33%;
			line-height: 60upx;
			.num{
				font-size:40upx;
			}
		}
	}

	.control {
		margin-top: 36upx;
		padding-bottom: 26upx;
		display: flex;
		align-items: center; //子元素垂直居中


.row{
	width:25%;
	float: left;
}
		
		.control_icon {
			width: 48upx;
			height: 48upx;
			float: left;
		}

		.control_text {
			font-size: 26upx;
			line-height: 40upx;
			height: 40upx;
			width: 90upx;
			margin-left: 10upx;
			color: rgb(51, 51, 51);
			float: left;
		}
	}
}

.ad_pic_cont {
	padding: 20upx 40upx 10upx;

	.ad_pic {
		width: 49%;
		height: 100upx;
		border-radius: 10upx;
	}

	.ad_pic:first-child {
		width: 49%;
		padding-right: 2%;
	}
}

.function_cont {
	background-color: #ffffff;
	margin: 0 20upx 20upx;
	border-radius: 10upx;
	padding: 20upx 0;
	
	.function_title {
		font-size: 28upx;
		padding: 0 0 0upx 20upx;
		border-left: 10upx solid #1191f6;
		color: rgb(51, 51, 51);
	}
	.mynotice{
		border-left: 10upx solid #ff0000;
	}
	.notice{
		font-size: 32upx;
		line-height: 56upx;
		letter-spacing: 2px;
	}
	.function_cont {
		margin-top: 18upx;
		border-top: 2upx solid #e8e8e8;

		.function_list {
			margin-top: 40upx;

			.function_item {
				width: 25%;
				font-size: 22upx;
				text-align: center;
				line-height: 42upx;
				padding: 10upx;
				color: rgb(51, 51, 51);

				.function_item_img {
					width: 50upx;
					height: 50upx;
				}
			}

			.betting_item {
				position: relative;

				.betting_num {
					top: -10upx;
					right: 46upx;
					background: red;
					border-radius: 50%;
					height: 28upx;
					width: 28upx;
					line-height: 24upx;
					color: #fff;
					position: absolute;
				}
			}
		}

		.function_list:first-child {
			margin-top: 20upx;
		}
	}
}

.btn_cont {
	margin: 20upx;

	.exit_btn {
		text-align: center;
		font-size: 28upx;
		background-color: #ffffff;
		color: rgb(51, 51, 51);
	}
}

.popup_cont {
	background-color: #ffffff;
	border-radius: 10upx;
	width: 520upx;
	height: auto;

	.popup_cont_list {
		padding: 20upx;

		.head_img_item_cont {
			position: relative;
			margin-left: 46upx;
			margin-bottom: 20upx;

			.head_img_item {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				border: 2upx solid #cecece;
			}

			.active_head_img {
				position: absolute;
				top: 76upx;
				left: 26upx;
				width: 46upx;
				height: 46upx;
				display: none;
			}
		}
	}
}
</style>
